<template>
  <el-menu
    default-active="1"
    unique-opened="true"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <!-- 子菜单1 -->
    <el-submenu :index="item.perId + ''" v-for="item of menu" :key="item.id">
      <!-- 一级菜单标题 -->
      <template slot="title">
        <i :class="item.perIcon"></i>
        <span>{{ item.perName }}</span>
      </template>
      <!-- 一级菜单对应的二级菜单 -->
      <el-menu-item
        :index="subitem.id + ''"
        v-for="subitem of item.children"
        :key="subitem.perId"
        @click="handlerRoute(subitem.perHref)"
      >
        {{ subitem.perName }}
        <!-- 二级菜单对应的三级菜单 -->
        <div v-for="(subitem2, index) in subitem.children" :key="index">
          <el-menu-item
            :index="subitem2.id + ''"
            :key="subitem2.perId"
            @click="handlerRoute(subitem2.perHref)"
          >
            {{ subitem2.perName }}
          </el-menu-item>
        </div>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      menu: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handlerRoute(url) {
      this.$router.push(url);
    },
  },
  mounted() {
    this.menu = JSON.parse(sessionStorage.getItem("menu"));
  },
};
     </script>